<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="layout">
  <head>
  	<title>比赛财务管理</title>
    <script type="text/javascript">
    	var id = getQueryString("id");
    	function findDate(beginAt, endAt,flg){
    		var head = [{name:'报名收费', show:true, open:true},
    			        {name:'报名成功人数', show:false, open:false},
    			        {name:'商品售卖数', show:false, open:false},
    			        {name:'商品收费', show:true, open:false}];
    		//echart加载图表
    		$.ajaxData({url:"../info-detail-count-detail", data:{id:id,beginAt:beginAt,endAt:endAt,type:'SF',flg:flg}, success:function(ret){
    			var x=[];
				var yData = [];
    			$.each(ret, function(i,v){
    				x.unshift(v.date);
    				v.countHtml = '';
    				$.each(head, function(i2,v2){
    					v.countHtml += "<td>"+(v[v2.name] == null ? 0 : v[v2.name]) +"</td>"
    				});
    			});
    			$.each(head, function(i,v){
    				if(v.show){
	    				var show = (i==0?true:false);
	    				var headData = {name:v.name,show:v.open,data:[]};
	    				$.each(ret, function(i2,v2){
	    					var count = (v2[v.name]==null?0:v2[v.name])
	    					headData.data.unshift(count)
	       				});
	    				yData.push(headData);
    				}
    			})
   				$("#echarts").echartsLine({xData:x, yData:yData});
    		}})
    		//表格加载数据
       		$("#pageJinji").page({url:"getTableData",data:{evaluateId:id,beginAt:beginAt,endAt:endAt,flg:flg},success:function(obj){
	    		$.each(obj.obj.content, function(i,v){
	    			v.createdAt = (v.createdAt == null ? "--":new Date(v.createdAt).Format("yyyy.MM.dd"));
	    			v.orderCreatedAt = new Date(v.orderCreatedAt).Format("yyyy.MM.dd");
	    		});
	    		$("#pageJinjiTabel").loadData(obj.obj);
	    		$("span[data='look']").each(function(){
	    			var text = $(this).attr("data-text");
	    			if(text != ''){
	    				var textHtml = "";
	    				var textObj = eval("("+text+")");
	    				$.each(textObj, function(i,v){
	    					textHtml += "<div>"+i+":"+v+"</div>";
	    				});
	    				$(this).jjinfo(textHtml);
	    			}
	    		});
	    	}});
    	};
    	
    	function beforeDate(day, obj,flg){
    		if(obj != null){
    			$(".detail-s-bar").removeClass("active");
    			$(obj).addClass("active");
    		}
    		var beginAt = new Date().DateAdd(day).Format("yyyy-MM-dd");
    		var endAt = new Date().Format("yyyy-MM-dd");
    		findDate(beginAt, endAt,flg);
    	};
    	
    	$(function(){
    		setMenu("收费管理")
    		$("#infoExport").loadData({id:id});
    		$.ajaxData({url:"info-detail-count", data:{evaluateId:id}, success:function(ret){
    			$("#infoCounts").loadData(ret);
    		}});
    		var beginAt = new Date().DateAdd(-7).Format("yyyy-MM-dd");
    		var endAt = new Date().Format("yyyy-MM-dd");
    		var dateRange = new pickerDateRange('listStageDate', {
	            isTodayValid : true,
	            startDate:beginAt,
	            endDate:endAt,
	            defaultText : ' 至 ',
	            theme : 'ta',
	            success : function(obj) {
	            	$(".detail-s-bar").removeClass("active");
	            	if(obj.endDate == ''){
	            		obj.endDate = obj.startDate;
	            	}
	            	if(obj.endDate == ''){
	            		return;
	            	}
	            	findDate(obj.startDate,obj.endDate,0);
	            }
	        });
    		$('.opt_sel').on('click',function(e){setTimeout(function(){ $('#listStageDate').click();}, 0)});
    		beforeDate(-14,null,14);
    	});
    </script>
  </head>
  <body>
	<div layout:fragment="content" class="content" id="modal">
         	
         	<div class="modal">
         		<div class="detail">
         			<div class="detail-top"><label class="detail-title">关键数据<i class="icon-help"></i></label></div>
         			<div class="detail-cont">
         				<script type="text/template" id="infoCounts">
						<div class="detail-c-box">
         					<div class="detail-c">
         						<div class="detail-c-label">报名费</div>
         						<div class="detail-c-count"><strong>#{orderSum}#</strong></div>
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c">#{orderSumDay}#</label>
         					</div>
         				</div>
						<div class="detail-c-box">
         					<div class="detail-c">
         						<div class="detail-c-label">商品</div>
         						<div class="detail-c-count"><strong>#{otherOrderSum}#</strong></div>
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c">#{otherOrderSumDay}#</label>
         					</div>
         				</div>
						</script>
         			</div>
         			
         			<div class="detail-row">
	       				<div class="detail-s">
	       					<span class="detail-s-bar" onclick="beforeDate(-7, this,7)"><span class="detail-s-btn">7天</span></span>
	       					<span class="detail-s-bar active" onclick="beforeDate(-14, this,14)"><span class="detail-s-btn">14天</span></span>
	       					<span class="detail-s-bar" onclick="beforeDate(-30, this,30)"><span class="detail-s-btn">30天</span></span>
							<span class="detail-s-bar" onclick="beforeDate(null, this,100)"><span class="detail-s-btn">全部</span></span>
							<div class="ta_date" style="">
		                        <span class="date_title" id="listStageDate">请选择日期</span>
		                        <a class="opt_sel" href="javascript:void(0)">
		                            <i class="i_orderd"></i>
		                        </a>
		                    </div>
		                    <div id="datePicker"></div>
	       				</div>
       				</div>
       				<div style="height: 300px;" id="echarts"></div>
         			
       				<div class="detail-table">
       				<script type="text/template" id="infoExport">
       				<h4 class="detail-table-title">
						报名用户
						<span class="detail-table-more">
							<a href="info-export?evaluateId=#{id}#"><i class="icon_export"></i>导出CSV</a>
						</span>
					</h4>
					</script>
				    <div class="table_list">
		               <div class="">
		                   <table class="table">
		                       <thead>
		                           <tr>
		                               <th>付款时间</th>
		                               <th>用户</th>
		                               <th>渠道</th>
		                               <th>报名时间</th>
		                               <th>报名信息</th>
		                               <th>票种</th>
		                               <th>订单编号</th>
		                               <th>
									   <div class="caret">
                                         <div class="caret-menu">
                                         	<span class="btn active" onclick="$('#pageJinji').pageReload({orderItemType:''});">全部</span>
                                             <span class="btn" onclick="$('#pageJinji').pageReload({orderItemType:'EvaluateSignup'});">比赛报名</span>
                                         </div>
                                         <span>全部</span>
	                                   </div>
		                               </th>
		                               <th>
									   <div class="caret">
                                          <div class="caret-menu">
                                          	<span class="btn active" onclick="$('#pageJinji').pageReload({orderState:''});">状态全部</span>
                                              <span class="btn" onclick="$('#pageJinji').pageReload({orderState:'PAID'});">已付款</span>
                                              <span class="btn" onclick="$('#pageJinji').pageReload({orderState:'UNPAID'});">未付款</span>
                                          </div>
                                          <span>状态全部</span>
                                       </div>
		                               </th>
		                               <th>付款方式</th>
		                               <th>费用</th>
		                           </tr>
		                       </thead>
		                       <tbody>
		                       <script type="template" id="pageJinjiTabel">
								#for(data:content)#
									<tr>
										<td>#{data.orderCreatedAt}#</td>
										<td>#{data.userName}# (#{data.userNumber}#)</td>
										<td>#{data.refName}#</td>
										<td>#{data.createdAt}#</td>
										<td><span data='look' data-text='#{data.text}#' class="table-icon table-icon-info"></span></td>
										<td>#{data.epName}#</td>
										<td>#{data.orderId}#</td>
										<td>#{data.orderItemTypeDesc}#</td>
										<td>#{data.orderStateDesc}#</td>
										<td>#{data.orderTradeTypeDesc}#</td>
										<td>#{data.orderItemPrice}#</td>	
									</tr>
								#endfor#
								</script>
		                     </tbody>
		                 </table>
		                 <div id="pageJinji"></div>
		             </div>
		          </div>
		          </div>
         		</div>
			</div>
	
	</div>
  </body>
</html>
